import React, { Component } from 'react'


const Header = (props) => {

    // 函数式组件和 Vue 中的组合式 API 一样无法使用 this
    // console.log(this);

    // 在函数式组件中因为没有 this ，所以我们需要在函数组件的参数中进行接收 props 
    // console.log(props);
    return (<>
        <div> 没有不变了承诺 -- {props.name} -- {props.num + 1} -- {props.age + 1} </div>
    </>)
}


class Content extends Component {


    render() {
        // 在类组件中可以直接通过  this.props 来获取我们传递的参数
        console.log(this);

        return (
            <div>只有说不完的谎言。 -- {this.props.name} </div>
        )
    }
}



export default class App extends Component {
    render() {
        return (
            <div>
                {/* 只要你传递的参数不是纯字符串，那么都需要加上 {} */}
                <Header name='React' num='18' age={18} />

                <Content name='React' num='18' obj={{
                    name: '张三',
                    age: 18
                }} />
            </div>
        )
    }
}
